<template>
  <div>setup入口函数:{{ msg }}</div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'hi vue3'
    }
  },
  /**
   * vue3代码写到这里
   *1. setup 函数是一个新的组件选项，作为组件中组合式API 的起点（入口）
    2. **setup 中不能使用 this， this 指向 undefined**
    3. setup函数只会在组件初始化的时候执行一次
    4. == setup函数在beforeCreate生命周期钩子执行之前执行 ==
   */
  setup () {
    console.log('setup组件实例：', this)
  },
  beforeCreate () {
    // 注意：这里获取不到变量
    console.log('beforeCreate组件实例：', this, this.msg)
  },
  created () {
    // 发请求获取后台数据=》存到data变量上
    console.log('created组件实例：', this, this.msg)
  }
}
</script>

<style scoped>
</style>
